<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=2">
		<script src="./js/socket.io-1.4.5.js"></script>
		<link rel="stylesheet" href="./css/index.css" />
		<link rel="stylesheet" href="./css/vant.min.css">
		<style>
			.van-ellipsis {
				font-size: 12px;
			}

			.van-dropdown-menu__title::after {
				position: absolute;
				top: 50%;
				right: 0px;
				margin-top: -5px;
				border: 3px solid;
				border-color: transparent transparent currentColor currentColor;
				-webkit-transform: rotate(-45deg);
				transform: rotate(-45deg);
				opacity: .8;
				content: '';
			}
			/*  */
			.menu{
				display: flex;
				flex-direction: column;
				max-height: 246px;
				padding: 5px 10px 5px 10px;
				border: 1px solid #aeaeae;
				border-radius: 5px;
				background-color: #f5f5f5;
				overflow-y: auto;
				position: fixed;
				z-index: 99;
				top: 30px;
				right: 25px;
			}
			.menu_one{
				display: flex;
				flex-direction: column;
			}
			.menu_one label{
				margin-top: 10px;
			}
			.menu_btn{
				display: flex;
				justify-content: space-around;
				width: 100%;
				margin-top: 10px;
			}
			.menu_btn button{
				width: 30%;
				font-size: 14px;
			}
		</style>
	</head>

	<body style="background-color: #e5e4e5;">
		<div id="vue" style="margin-top: 10px; width: 100%;position: relative;"  onload="pageLoad();">
			<div class="lis">
				<ul id="toolsul" class="tools">
					<!-- 选中 -->
					<li @click="handleTools('pick')" :class=" lei == 'pick' ? 'active' : ''">
						<img class="window1" src="./img/shubiao.png" alt="">
						<p>选中</p>
					</li>
					<li>
						<div>
							<van-dropdown-menu>
								<van-dropdown-item title="结构" ref="item">
									<van-cell-group>
										<!--输入框-->
										<van-field v-model="message" autosize type="number" placeholder="行数数字" />
										<!-- <van-field v-model="messageW"   type="number" placeholder="行数数字" /> -->
									</van-cell-group>
									<div v-show="message!=0 && message!=1">
										<div v-for="(index,item) in messageInt">
											<!-- <span>
												index:{{index}},item:{{item}
											</span> -->
											<van-cell-group>
												<van-field v-model="textSZ[index]" label="行高" rows="1" autosize
													type="number" placeholder="行数数字长度" />
											</van-cell-group>
											<!-- 		<van-cell-group>
												<van-field v-model="textSZ[1]" label="行高1" type="number" placeholder="请输入第一个部分的宽度" />
												</van-cell-group> -->
											<!-- <van-cell-group >
												<van-field v-model="textSZ[2]" label="行高2" type="number" placeholder="请输入第二个部分的宽度" />
												</van-cell-group> -->
										</div>
									</div>
									<!-- 	<van-cell-group>
										<van-field v-model="messageWW" rows="1" autosize type="number" placeholder="行数的宽度" />
										</van-cell-group> -->
									<van-cell-group v-show="message!=0">
										<!--输入框-->
										<van-field v-model="messageW" label="行宽" rows="1" autosize type="number"
											placeholder="行数数字长度" />
									</van-cell-group>


									<van-cell-group>
										<!--输入框-->
										<van-field v-model="message1" rows="1" autosize type="number"
											placeholder="列数数字" />
									</van-cell-group>
									<div v-show="message1!=0 && message1!=1">
										<div v-for="(index,item) in message1Int">
											<van-cell-group>
												<van-field v-model="textSZ1[index]" label="列宽" rows="1" autosize
													type="number" placeholder="列数数字宽度" />
											</van-cell-group>
											<!-- 	<van-cell-group>
														<van-field v-model="message1WW" rows="1" autosize type="number" placeholder="列数数字宽度" />
													</van-cell-group> -->
										</div>
									</div>
									<van-cell-group v-show="message1!=0">
										<!--输入框-->
										<van-field v-model="message1W" label="列高" rows="1" autosize type="number"
											placeholder="列数数字长度" />
									</van-cell-group>
									<van-button block type="info" @click="onConfirm">确认</van-button>
								</van-dropdown-item>
							</van-dropdown-menu>
						</div>
					</li>
					<!-- 笔 -->
					<li id="toolsPencil" @click="handleTools('pencil')" :class="lei == 'pencil' ? 'active' : ''">
						<img class="window1" src="./img/bi.png" alt="">
						<p>画笔</p>
					</li>
					<!-- 箭头线 -->
					<li @click="handleTools('arrow')" :class="lei == 'arrow' ? 'active' : ''">
						<img class="window1" src="./img/jt.png" alt="">
						<p>箭头线</p>
					</li>
					<!-- 虚线 -->
					<li @click="handleTools('xuxian')" :class="lei == 'xuxian' ? 'active' : ''">
						<img class="window1" src="./img/x.png" alt="">
						<p>虚线</p>
					</li>
					<!-- 虚点线 -->
					<li @click="handleTools('xuxian1')" :class="lei == 'xuxian1' ? 'active' : ''">
						<img class="window3" src="./img/x1.png" alt="">
						<p>点虚线</p>
					</li>
					<!-- 直线 -->
					<li @click="handleTools('line')" :class="lei == 'line' ? 'active' : ''">
						<img class="window1" src="./img/z.png" alt="">
						<p>直线</p>
					</li>
					<!-- 粗直线 -->
					<li @click="handleTools('line1')" :class="lei == 'line1' ? 'active' : ''">
						<img class="window2" src="./img/z1.png" alt="">
						<p>粗直线</p>
					</li>
					<!-- 双横线 -->
						<!-- 18 -->
					<li @click="handleTools('shuxian')" :class="lei == 'shuxian' ? 'active' : ''">
						<img class="window1" src="./img/shuxian.png" alt="">
						<p>双线18</p>
					</li>
						<!-- 20 -->
					<li @click="handleTools('shuxian_one')" :class="lei == 'shuxian_one' ? 'active' : ''">
						<img class="window1" src="./img/shuxian.png" alt="">
						<p>双线12</p>
					</li>
						<!-- 24 -->
					<li @click="handleTools('shuxian_two')" :class="lei == 'shuxian_two' ? 'active' : ''">
						<img class="window1" src="./img/shuxian.png" alt="">
						<p>双线24</p>
					</li>
					<!-- //双竖线 -->
					<li @click="handleTools('shuxian1')" :class="lei == 'shuxian1' ? 'active' : ''">
						<img class="window1" src="./img/shuxian1.png" alt="">
						<p>双竖线</p>
					</li>
					<li @click="handleTools('shuxian2')" :class="lei == 'shuxian2' ? 'active' : ''">
						<img class="window1" src="./img/shuxian.png" alt="">
						<p>双横线</p>
					</li>
					<!-- //弧线 -->
					<li @click="handleTools('arc')" :class="lei == 'arc' ? 'active' : ''">
						<img class="window1" src="./img/arc.png" alt="">
						<p>弧线</p>
					</li>
					<!-- 长方形 -->
					<li @click="handleTools('juxing1')" :class="lei == 'juxing1' ? 'active' : ''">
						<img class="window1" src="./img/cfx.png" alt="">
						<p>长方形</p>
					</li>
					<!-- 长方形 填充 -->
					<li @click="handleTools('juxing')" :class="lei == 'juxing' ? 'active' : ''">
						<img class="window1" src="./img/changfangxing.png" alt="">
						<p>柱子</p>
					</li>
					<!-- 窗户 -->
					<li @click="handleTools('rightangle')" :class="lei == 'rightangle' ? 'active' : ''">
						<img src="./img/window.png" alt="">
						<p>窗</p>
					</li>
					<!-- 凸窗 -->
					<li @click="handleTools('rightangle1')" :class="lei == 'rightangle1' ? 'active' : ''">
						<img class="window1" src="./img/window1.png" alt="">
						<p>凸窗</p>
					</li>
					<!-- 门 -->
					<li @click="handleTools('isosceles')" :class="lei == 'isosceles' ? 'active' : ''">
						<img class="window1" src="./img/door.png" alt="">
						<p>门</p>
					</li>
					<!-- 门 -->
					<li @click="handleTools('isosceles1')" :class="lei == 'isosceles1' ? 'active' : ''">
						<img class="window1" src="./img/b.png" alt="">
						<p>指北针</p>
					</li>
					<!-- 直角
					<li @click="handleTools('zhijiao')" :class="lei == 'zhijiao' ? 'active' : ''">
						<img class="c " src="./img/zj.png" alt="">
						<p>直角</p>
					</li>        -->
					<!-- 圆 -->
					<li @click="handleTools('cricle')" :class="lei == 'cricle' ? 'active' : ''">
						<img class="window1" src="./img/y.png" alt="">
						<p>圆</p>
					</li>
					<!-- 圆填充 -->
					<li @click="handleTools('cricle1')" :class="lei == 'cricle1' ? 'active' : ''">
						<img class="window1" src="./img/y1.png" alt="">
						<p>圆</p>
					</li>
					<!-- 楼梯 -->
					<li @click="handleTools('louti')" :class="lei == 'louti' ? 'active' : ''">
						<img class="window1" src="./img/louti.png" alt="">
						<p>楼梯</p>
					</li>
					<!-- 写字 -->
					<li @click="handleTools('xiezi')" :class="lei == 'xiezi' ? 'active' : ''" class="xiezi">
						<img class="window1" src="./img/xiezi.png" alt="">
						<p>文字</p>
					</li>
					<!-- 撤销 -->
					<li @click="handleTools('undo')">
						<img class="window1" src="./img/c.png" alt="">
						<p>撤销</p>
					</li>
					<!-- 恢复 -->
					<li @click="handleTools('redo')">
						<img class="window1 a" src="./img/c1.png" alt="">
						<p>恢复</p>
					</li>
					<!-- 橡皮擦 -->
					<!-- <li @click="handleTools('remove11')" :class="lei == 'remove11' ? 'active' : ''">
						<img class="window1" src="./img/xpc.png" alt="">
						<p>橡皮擦</p>
					</li> -->
					<li @click="handleTools('remove')" id="remove" :class="lei == 'remove' ? 'active' : ''">
						<img class="window1 b " src="./img/xs.png" alt="">
						<p>删除</p>
					</li>
					<!-- 保存 不透明-->
					<li id="baocun" @click="baocun">
						<img class="window1 a d" src="./img/baocun.png" alt="">
						<p>保存</p>
					</li>
					<!-- 清空 -->
					<li @click="handleTools('reset')">
						<img class="window1 a d" src="./img/qingkong.png" alt="">
						<p>清空</p>
					</li>
					<!-- 放大 -->
					<li>
						<button style="width: 100%;height: 100%;line-height: 25px;font-size: 12px;" @click="scale_max">放大</button>
					</li>
					<!-- 缩小 -->
					<li>
						<button style="width: 100%;height: 100%;line-height: 25px;font-size: 12px;" @click="scale_min">缩小</button>
					</li>
				</ul>
			</div>
			<div id="canvasDiv" class="canvasDiv">
				<!-- button按钮 鼠标滚轮 放大缩小 (如果不需要可以删除掉) (功能未完善) -->
				<!-- 悬浮菜单 -->
				<div class="menu">
					<!-- 面板控制开关 -->
					<button type="button" @click="menu_state_modify">{{menu_text}}</button>
					<!--  -->
					<div class="menu_one" v-show="menu_state">
						<label>
							<span>X轴坐标:</span>
							<input type="number" v-model="coordinates.x_shaft" maxlength="10" placeholder="请输入X轴坐标">
						</label>
						<label>
							<span>Y轴坐标:</span>
							<input type="number" v-model="coordinates.y_shaft" maxlength="10" placeholder="请输入Y轴坐标">
						</label>
							<label>
							<span>旋转角度:</span>
							<input type="number" v-model="coordinates.angle" maxlength="10" placeholder="请输入旋转角度">
						</label>
							<label>
							<span>控件宽度:</span>
							<input type="number" v-model="coordinates.width" maxlength="10" placeholder="请输入控件宽度">
						</label>
							<label>
							<span>控件高度:</span>
							<input type="number" v-model="coordinates.height" maxlength="10" placeholder="请输入控件高度">
						</label>
							<label>
							<span>下线左距:</span>
							<input type="number" v-model="coordinates.left_bottom" maxlength="10" placeholder="请输入需要减少的长度">
						</label>
							<label>
							<span>上线左距:</span>
							<input type="number" v-model="coordinates.left_top" maxlength="10" placeholder="请输入需要减少的长度">
						</label>
							<label>
							<span>上线宽度:</span>
							<input type="number" v-model="coordinates.top_line_width" maxlength="10" placeholder="请输入上线宽度">
						</label>
							<label>
							<span>下线宽度:</span>
							<input type="number" v-model="coordinates.bottom_line_width" maxlength="10" placeholder="请输入下线宽度">
						</label>
						<label>
							<span>弧线半径:</span>
							<input type="number" v-model="coordinates.radius" maxlength="10" placeholder="请输入双线间距">
						</label>
						<label>
							<span>双线间距:</span>
							<input type="number" v-model="coordinates.spacing" maxlength="10" placeholder="请输入双线间距">
						</label>
						<div class="menu_btn">
							<button @click="reset">清空</button>
							<button id="restoryBtn" onclick="centerScale()">画布还原</button>
							<button @click="modify_data">保存修改</button>
						</div>
						
					</div>
				</div>
				
				<canvas id="canvas" width="1750" height="850">
					请使用支持HTML5的浏览器
				</canvas>
			</div>
			<!-- <div v-if="xzwidth!=''">
				当前选中的长度为：<span v-text="xzwidth"></span>
			</div> -->
		</div>
		<script src="./js/vue.min.js"></script>
		<script src="./js/vant.min.js"></script>
		<!-- <script src="./js/mui.js"></script> -->
		<script src="./js/jquery.min.js"></script>
		<script src="./js/fabric.js"></script>
		<script src="./js/guidelines.js"></script>
		<script src='2-14zbzb.js'></script>
		<!-- <script src="./js/demo.js"></script> -->
		<!-- <script src="./js/canvasZoom.js"></script> -->
		<script>
			// var socket = io.connect(window.location.origin);
			// socket.on("connect", function () {
			//   console.log("Client conneced!Clear board!");
			//   socket.emit("clear"); // 这里是一个模拟的过程,实际不会发生 connect 就清除的情况
			// });
			new Vue({
				el: '#vue',
				data() {
					return {
						px: 0,
						px1: 0,
						show: false,
						show1: false,
						textSZ: [0],
						textSZ1: [0],
						message: "",
						messageInt: 0,
						message1Int: 0,
						text: 2,
						messageW: "",
						message1: "",
						messageWW: "",
						message1W: "",
						message1WW: "",
						jlPx: "",
						jlPxS: "",
						fristOneTime: 0,
						xzwidth: "",
						lei: "pick",
						currentTool: "pick",
						done: false,
						fabricObj: null,
						initIdx: 3,
						mouseFrom: {}, //1
						mouseTo: {}, //1
						moveCount: 1, //绘制移动计数器 1
						doDrawing: false, // 绘制状态 1
						isDelete: false,
						fabricHistoryJson: [],
						mods: 0,
						drawingObject: null, //绘制对象 1
						drawColor: "#000", //1
						drawWidth: 2, //1
						zoom: window.zoom ? window.zoom : 1,
						zoomPoint: new fabric.Point(0, 0), //初始时缩放原点的位置设为（0,0），这是页面的左上顶点
						lastzoomPoint: {
							x: 0,
							y: 0
						}, //初始时，前一次缩放原点同样为(0,0)
						lastmousePoint: {
							x: 0,
							y: 0
						}, //进行缩放，需要对此刻缩放位置进行保存，来计算出缩放原点，此刻初始时设为0,0
						lastzoom: 1, //表示为上一次的缩放倍数，此刻设为1
						relativeMouseX: 0, //表示相对的鼠标位移，用来记录画布的绝对移动距离
						relativeMouseY: 0, //表示相对的鼠标位移，用来记录画布的绝对移动距离
						// 坐标输入框
						coordinates:{
							x_shaft: 0,//x
							y_shaft: 0,//y
							angle: 0,//旋转角度
							width: 0,//宽度
							height: 0,//高度
							top_line_width: 0,
							bottom_line_width: 0,
							left_bottom: 0,//下线左距
							left_top: 0,//上线左距
							radius: 0,//弧线半径	
							spacing: 0// 双线间距
						},
						fabricObject: null,//
						fabricobj_line: null,//修改线条需要
						scale: 1,//缩放级别
						// 面板状态
						menu_state: false,//默认不显示
						menu_text: "打开面板"

					};
				},
				watch: {
					message: {
						// immediate: true,
						handler: function(newVal, oldVal) {
							// this.messageInt = parseInt(newVal)+1
							// console.log(newVal)
							// console.log(typeof parseInt(newVal))
							let num = parseInt(newVal);
							this.messageInt = num - 1;
						}
					},
					message1: {
						handler: function(newVal, oldVal) {
							// this.messageInt = parseInt(newVal)+1
							// console.log(newVal)
							// console.log(typeof parseInt(newVal))
							let num = parseInt(newVal);
							this.message1Int = num - 1;
						}
					}
				},
				mounted() {
					//初始化canvas
					this.initCanvas()
					// 获取屏幕宽高
					this.get_system()
				},
				computed: {
					canvasWidth() {
						return window.innerWidth;
					},
					canvasHeight() {
						return this.$refs.canvasWraper.offsetHeight;
					},
				},
				methods: {
					// 获取屏幕宽高
					get_system(){
						// let canvas = document.querySelector("canvas")
						// canvas.style.width = screen.availWidth - 120 + 'px'
						// canvas.style.height = screen.availHeight - 30 + 'px'
						
					},
					// 修改面板状态
					menu_state_modify(){
						this.menu_state = !this.menu_state
						if(this.menu_state) this.menu_text = "关闭面板"
						else this.menu_text = "打开面板"
						
					},
					// 
					onConfirm() {

						this.$refs.item.toggle();
						//       console.log(this.message, "message数字");
						//       console.log(this.message1, "message1数字");
						// console.log(this.messageW, "messageW数字");
						// console.log(this.message1W, "message1W数字");
						// console.log(typeof(parseInt(this.messageW)))
						//   console.log(this.messageWW, "messageWW数字");
						if (this.messageW == "") {
							this.messageW = 380; //设置默认大小
						}
						if (this.message1W == "") {
							this.message1W = 380; //设置默认大小
						}
						if (this.messageWW == "") { //设置默认大小
							this.messageWW = 70;
						}
						if (this.textSZ[0] == 0) {
							this.textSZ[0] = 50;
						}
						let messageIntW = parseInt(this.messageW) //横轴长度
						let messageInt1W = parseInt(this.message1W) //竖轴长度
						let messageIntWW = parseInt(this.messageWW) //横轴宽度
						for (let i = 0; i < this.message; i++) {
							// if(i==0){
							//  // this.jlPx = this.messageWW
							//  // console.log("我是jlpx="+this.jlPx)
							// }
							this.jlPx = this.textSZ[i]
							console.log(this.jlPx, "jpPx")
							// this.px += messageIntWW;
							this.px += parseInt(this.jlPx);
							console.log(this.px);
							//第一个参数：左边开始位置（top）
							//第二个参数是长度
							//第三个参数是和第一个参数保持一致，右边开始的位置（top）

							//顶部位置
							var fabricObject = new fabric.Line([100, messageIntW, 100, 0], {
								stroke: this.drawColor,
								strokeWidth: this.drawWidth,
								left: messageIntW + 100,
								top: this.px + 25,
								angle: 90, //水平
							});
 
							this.fabricObj.add(fabricObject);

							//添加A B C 左边开始
							let numText = new fabric.Textbox(String.fromCharCode(65 + i), {
								width: 20,
								// top: this.px,
								top: -10,
								left: -4,
								fontSize: 15,
								textAlign: 'center'
							});
							// this.fabricObj.add(numText);

							let circleYuan = new fabric.Circle({//绘制圆形
								// top: 20,
								left: 6,
								radius: 10,
								stroke:'#000' ,
								fill:'#fff',
								originX: 'center',//调整中心点的X轴坐标
								originY: 'center',//调整中心点的Y轴坐标
								// strokeWidth: 30
								drawWidth:2
								// width:20,
								// height:20
								
								});
							let groupYuanText1 = new fabric.Group([circleYuan, numText], {
								// top: messageInt1W+30,
								// left: parseInt(this.px1)-11,
								top: this.px + 15,
								left: 79,
								// originX: 'center',//调整中心点的X轴坐标
								// originY: 'center'
								// width:20,
								// height:20
								})
							this.fabricObj.add(groupYuanText1);
							//添加A B C 左边结束

							//添加A B C 右边开始
							let numText2 = new fabric.Textbox(String.fromCharCode(65 + i), {
								width: 20,
								// top: this.px,
								top: -10,
								left: -4,
								fontSize: 15,
								textAlign: 'center'
							});
							// this.fabricObj.add(numText2);

							let circleYuan2 = new fabric.Circle({//绘制圆形
								// top: 20,
								left: 6,
								radius: 10,
								stroke:'#000' ,
								fill:'#fff',
								originX: 'center',//调整中心点的X轴坐标
								originY: 'center',//调整中心点的Y轴坐标
								// strokeWidth: 30
								drawWidth:2
								// width:20,
								// height:20
								
								});
							let groupYuanText2 = new fabric.Group([circleYuan2, numText2], {
								top: this.px + 15,
								left: messageIntW + 100,
								// top: this.px - 8,
								// left: 9,
								// originX: 'center',//调整中心点的X轴坐标
								// originY: 'center'
								// width:20,
								// height:20
								})
							this.fabricObj.add(groupYuanText2);
							//添加A B C 右边结束



							// console.log("我是i="+i);
							// console.log("我是i+1="+(parseInt(i)+parseInt(1)));
							// console.log(i+1)
							// console.log((i+1)%2==0)
							// let flagjl = (i+1)%2==0
							// console.log("外面:"+flagjl)
							if (i != 0) { //说明需要画出距离
								// console.log("我是需要画出距离的人")
								// console.log(flagjl)
								// console.log("我是px=",this.px)
								// let jl = parseInt(this.px) - parseInt(this.jlPx)
								//第一个 条线
								let fabricObjectTop = new fabric.Line([100, this.jlPx, 100, 0], {
									stroke: this.drawColor,
									strokeWidth: this.drawWidth,
									left: messageIntW + 70,  //左右移动
									// top: this.px-((this.jlPx)*i),
									top: this.px - this.jlPx + 25,
									angle: 0, //水平
								});
								
								this.fabricObj.add(fabricObjectTop);
								// 			 //距离显示
								// let jl = parseInt(this.px) - parseInt(this.jlPx)
								// console.log(this.px ,"我是px");
								// console.log(this.jlPx ,"我是jlpx");
								// console.log(jl ,"我是jl");
								let jlText = new fabric.Textbox(this.jlPx + "", {
									width: 20,
									// top: this.px,
									top: (this.px - this.jlPx) + this.jlPx / 3 + 40,
									left: messageIntW + 72,
									fontSize: 15,
									textAlign: 'center',
									angle: -90 //旋转数字
								});
								// let groupYuanText33 = new fabric.Group([jlText], {
								// left: messageIntW + 20,
								// top: (this.px - this.jlPx) + this.jlPx / 3,
								// left: messageIntW + 10,
								// // originX: 'center',//调整中心点的X轴坐标
								// // originY: 'center',//调整中心点的Y轴坐标
								// angle: -90
								// // width:20,
								// // height:20
								// })
								// this.fabricObj.add(groupYuanText33);
								this.fabricObj.add(jlText);

								//第二条线
								let fabricObjectBottom = new fabric.Line([0, this.jlPx, 0, 0], {
									stroke: this.drawColor,
									strokeWidth: this.drawWidth,
									left: messageIntW + 90,
									top: this.px - this.jlPx + 25,
									// bottom:50,
									angle: 0, //水平
								});
								this.fabricObj.add(fabricObjectBottom);

								///左边 数字 

								
								//第一个 条线
								let fabricObjectTop01 = new fabric.Line([100, this.jlPx, 100, 0], {
									stroke: this.drawColor,
									strokeWidth: this.drawWidth,
									left: 110,  //左右移动
									// top: this.px-((this.jlPx)*i),
									top: this.px - this.jlPx + 25,
									angle: 0, //水平
								});
								
								this.fabricObj.add(fabricObjectTop01);
								// 			 //距离显示
								// let jl = parseInt(this.px) - parseInt(this.jlPx)
								// console.log(this.px ,"我是px");
								// console.log(this.jlPx ,"我是jlpx");
								// console.log(jl ,"我是jl");
								let jlText01 = new fabric.Textbox(this.jlPx + "", {
									width: 20,
									// top: this.px,
									top: (this.px - this.jlPx) + this.jlPx / 3 + 40,
									left:  112,
									fontSize: 15,
									textAlign: 'center',
									angle: -90 //旋转数字
								});
								// let groupYuanText33 = new fabric.Group([jlText], {
								// left: messageIntW + 20,
								// top: (this.px - this.jlPx) + this.jlPx / 3,
								// left: messageIntW + 10,
								// // originX: 'center',//调整中心点的X轴坐标
								// // originY: 'center',//调整中心点的Y轴坐标
								// angle: -90
								// // width:20,
								// // height:20
								// })
								// this.fabricObj.add(groupYuanText33);
								this.fabricObj.add(jlText01);

								//第二条线
								let fabricObjectBottom01= new fabric.Line([0, this.jlPx, 0, 0], {
									stroke: this.drawColor,
									strokeWidth: this.drawWidth,
									left: 130,
									top: this.px - this.jlPx + 25,
									// bottom:50,
									angle: 0, //水平
								});
								this.fabricObj.add(fabricObjectBottom01);
							}
						}
						
						//横线
						for (let i = 0; i < this.message1; i++) {
							this.message1WW = this.textSZ1[i]
							if (this.message1WW == "") {
								this.message1WW = 40
							}
							this.px1 += parseInt(this.message1WW)
							console.log(this.px1, "我是px1");
							var fabricObject = new fabric.Line([100, messageInt1W + 30, 100, 30], {
								stroke: this.drawColor,
								strokeWidth: this.drawWidth,
								top: 25,
								left: parseInt(this.px1) + 110,
							});

							//添加数字 下边开始
							let circleYuan = new fabric.Circle({//绘制圆形
								// top: 20,
								left: -6,
								radius: 10,
								stroke:'#000' ,
								fill:'#fff',
								originX: 'center',//调整中心点的X轴坐标
								originY: 'center',//调整中心点的Y轴坐标
								// strokeWidth: 30
								drawWidth:2
								// width:20,
								// height:20
								
								});

							let numText = new fabric.Textbox((i+1).toString(), {
								width: 20,
								// top: this.px,
								//    top: messageInt1W+30,
								// left: parseInt(this.px1)-11,
								fontSize: 15,
								// textAlign: 'center',
								originX: 'center',
								originY: 'center'
							});
							let groupYuanText = new fabric.Group([circleYuan, numText], {
								top: messageInt1W+25,
								left: parseInt(this.px1) + 99,
								// originX: 'center',//调整中心点的X轴坐标
								// originY: 'center'
								// width:20,
								// height:20
								})
							this.fabricObj.add(groupYuanText);
							// 添加数字 下边结束


							//添加 头部 数字--开始
							let circleYuan1 = new fabric.Circle({//绘制圆形
								// top: 20,
								// left: parseInt(this.px1),
								radius: 10,
								stroke:'#000' ,
								fill:'#fff',
								originX: 'center',//调整中心点的X轴坐标
								originY: 'center',//调整中心点的Y轴坐标
								// strokeWidth: 30
								drawWidth:2
								// width:20,
								// height:20	
								});
								let numText1 = new fabric.Textbox((i+1).toString(), {
								width: 20,
								// top: this.px,
								//    top: messageInt1W+30,
								left: 6,
								fontSize: 15,
								// textAlign: 'center',
								originX: 'center',
								originY: 'center'
							});
								let groupYuanText1 = new fabric.Group([circleYuan1,numText1], {
								top: 4,
								left: parseInt(this.px1)  + 99,
								// originX: 'center',//调整中心点的X轴坐标
								// originY: 'center'
								// width:20,
								// height:20
								})
							this.fabricObj.add(groupYuanText1);
							//添加 头部 数字--结束

							this.fabricObj.add(fabricObject);
							console.log(this.message1WW, "我是message1WW")
							if (i != 0) {
								//第一个跳线
								let fabricObjectleft = new fabric.Line([100, this.message1WW , 100, 0], {
									stroke: this.drawColor,
									strokeWidth: this.drawWidth,
									left: this.px1 + 110,
									top: 37,
									angle: 90, //水平
								});
								this.fabricObj.add(fabricObjectleft);

								let jlText = new fabric.Textbox(this.message1WW.toString(), {
									width: 20,
									// top: this.px,
									top: 40,
									left: this.px1 - this.message1WW + this.message1WW / 3 + 110,
									fontSize: 15,
									textAlign: 'center'
								});
								this.fabricObj.add(jlText);

								//第二个跳线
								let fabricObjectRight = new fabric.Line([100, this.message1WW, 100, 0], {
									stroke: this.drawColor,
									strokeWidth: this.drawWidth,
									left: this.px1 + 110,
									top: 57,
									angle: 90, //水平
								});
								this.fabricObj.add(fabricObjectRight);

								// 下面数字
								//第一个跳线
								let fabricObjectleft02 = new fabric.Line([100, this.message1WW , 100, 0], {
									stroke: this.drawColor,
									strokeWidth: this.drawWidth,
									left: this.px1 + 110,
									top: messageInt1W -5,
									angle: 90, //水平
									// this.px - this.jlPx + 25,
								});
								this.fabricObj.add(fabricObjectleft02);

								let jlText02 = new fabric.Textbox(this.message1WW.toString(), {
									width: 20,
									// top: this.px,
									top: messageInt1W ,
									left: this.px1 - this.message1WW + this.message1WW / 3 + 110,
									fontSize: 15,
									textAlign: 'center'
								});
								this.fabricObj.add(jlText02);

								//第二个跳线
								let fabricObjectRight02 = new fabric.Line([100, this.message1WW, 100, 0], {
									stroke: this.drawColor,
									strokeWidth: this.drawWidth,
									left: this.px1 + 110,
									top: messageInt1W + 15,
									angle: 90, //水平
								});
								this.fabricObj.add(fabricObjectRight02);
							}
						}
					},
					onClick() {
						//当点击按钮时，显示弹出框
						this.show = true;
					},
					onClick1() {
						//当点击按钮时，显示弹出框
						this.show1 = true;
					},
					chargeBtn(action, done) {
						//确认or取消
						if (action === "cancel") {
							//取消按钮
							done();
						} else if (action === "confirm") {
							//确定按钮
							//向后端传值并关闭dialog弹出框
							this.show = false;
							console.log(this.message, "进来了11?");
						}
						done();
					},
					chargeBtn1(action, done) {
						//确认or取消
						if (action === "cancel") {
							//取消按钮
							done();
						} else if (action === "confirm") {
							//确定按钮
							//向后端传值并关闭dialog弹出框
							this.show = false;
							console.log(this.message1, "进来了22?");
						}
						done();
					},
					// 初始化
					initCanvas() {
						// let _this = this;
						this.fabricObj = new fabric.Canvas("canvas")
						// this.fabricObj.setWidth(550);
						// this.fabricObj.setHeight(420);
						initAligningGuidelines(this.fabricObj)
						//绑定画板事件
						this.fabricObjAddEvent();
					},
					getX(o) {
						return (
							this.lastzoomPoint.x +
							(o.pointer.x - this.zoomPoint.x - this.relativeMouseX) /
							this.fabricObj.getZoom())
					},
					getY(o) {
						return (
							this.lastzoomPoint.y +
							(o.pointer.y - this.zoomPoint.y - this.relativeMouseY) /
							this.fabricObj.getZoom()
						);
					},
					clamp(value, min, max) {
						return Math.max(min, Math.min(value, max));
					},
					//事件监听
					fabricObjAddEvent() {
						this.fabricObj.on({
							//鼠标按下
							"mouse:down": (o) => {
								// 计算鼠标坐标 转换成相对画布坐标
								this.mouseFrom.x = this.getX(o);
								this.mouseFrom.y = this.getY(o);
								this.doDrawing = true;
								// console.log("2222222222222222222222222")
								//按下写字
								if (this.currentTool == "xiezi") {
									this.drawText();
								}
								// 按下删除
								if (this.currentTool == "remove") {
									var el = this.fabricObj.getActiveObject(); // 获取当前选择的元素
									this.fabricObj.remove(el);
								}
							},
							//鼠标抬起
							"mouse:up": (o) => {
								// 计算鼠标坐标 转换成相对画布坐标
								this.mouseTo.x = this.getX(o);
								this.mouseTo.y = this.getY(o);
								this.drawingObject = null;
								this.moveCount = 1;
								this.doDrawing = false;
								console.log(o)
								if (this.currentTool !== "pick" && this.currentTool !== "remove")
									this.updateModifications(true);
								if (this.currentTool == "pick" && this.fabricObj.getActiveObject() != undefined) {
									let eactive = this.fabricObj.getActiveObject(); // 获取当前选择的元素
									// console.log(eactive)
									// console.log($.parseJSON(JSON.stringify(eactive)))

									if(eactive.type && eactive.type == 'group'){
										// 上线宽度
										if(eactive._objects[0] != null ||  eactive._objects[0] != undefined) this.coordinates.top_line_width = eactive._objects[0].width.toFixed(0)
										// 下线宽度
										if(eactive._objects[1] != null ||  eactive._objects[1] != undefined) this.coordinates.bottom_line_width = eactive._objects[1].width.toFixed(0)
										// 
										// 赋值,以做后续判断
										this.fabricobj_line = eactive
									}
									// 弧线半径
									if(eactive.radius){
										this.coordinates.radius = eactive.radius.toFixed(0)
										// 
										// 赋值,以做后续判断
										this.fabricobj_line = eactive
									}
									
									// 获取物体相应数据
									// x轴坐标
									if(eactive.left != null ||  eactive.left != undefined) this.coordinates.x_shaft = eactive.left.toFixed(0)
									// y轴坐标
									if(eactive.top != null || eactive.top != undefined) this.coordinates.y_shaft = eactive.top.toFixed(0)
									// 旋转角度
									if(eactive.angle != null || eactive.angle != undefined) this.coordinates.angle = eactive.angle.toFixed(0)
									// 宽度
									if(eactive.width != null || eactive.width != undefined) this.coordinates.width = eactive.width.toFixed(0)
									// 高度
									if(eactive.height != null || eactive.height != undefined) this.coordinates.height = eactive.height.toFixed(0)
									// 
									
									let json = $.parseJSON(JSON.stringify(eactive))
										if (json.type == "line" && json.width == 0) {
											this.xzwidth = json.height
										} else {
											this.xzwidth = json.width
										}
										// console.log(this.xzwidth)
									
								}
							},
							//鼠标移动
							"mouse:move": (o) => {
								if (this.moveCount % 2 && !this.doDrawing) {
									//减少绘制频率
									return;
								}
								
								this.moveCount++;
								// 计算鼠标坐标 转换成相对画布坐标
								this.mouseTo.x = this.getX(o);
								this.mouseTo.y = this.getY(o);
								this.drawing();
							},
						});
					},
					// 修改控件数据
					modify_data(){

						console.log(this.fabricObj.getActiveObject(),11)

						if(this.fabricObj.getActiveObject()){

							this.fabricObj.getActiveObject().set('top', parseInt(this.coordinates.y_shaft)).setCoords()
							this.fabricObj.getActiveObject().set('left', parseInt(this.coordinates.x_shaft)).setCoords()
							this.fabricObj.getActiveObject().set('angle', parseInt(this.coordinates.angle)).setCoords()
							this.fabricObj.getActiveObject().set('width', parseInt(this.coordinates.width)).setCoords()
							this.fabricObj.getActiveObject().set('height', parseInt(this.coordinates.height)).setCoords()



							// 判断是否是双线
							if(this.fabricobj_line && this.fabricobj_line.type && this.fabricobj_line.type == 'group'){
								this.fabricObj.getActiveObject().item(0).set('width', parseInt(this.coordinates.top_line_width)).setCoords()//上线长度
								this.fabricObj.getActiveObject().item(0).set('left', parseInt(this.fabricObj.getActiveObject().item(0).left - this.coordinates.left_top)).setCoords()//上线左距离
								// 下线
								this.fabricObj.getActiveObject().item(1).set('width', parseInt(this.coordinates.bottom_line_width)).setCoords()//下线长度
								this.fabricObj.getActiveObject().item(1).set('top', parseInt(this.coordinates.spacing)).setCoords()//下线与上线间距
								this.fabricObj.getActiveObject().item(1).set('left', parseInt(this.fabricObj.getActiveObject().item(1).left - this.coordinates.left_bottom)).setCoords()//上线左距离
							}
							// 判断是否为弧线,以做半径修改
							if(this.fabricobj_line.radius){
								this.fabricObj.getActiveObject().set('radius', parseInt(this.coordinates.radius)).setCoords()
							}

    					this.fabricObj.requestRenderAll()

							// 重置个别参数
							this.coordinates.left_bottom = 0//下线左距
							this.coordinates.left_top = 0//上线左距	
						}
						
					},
					// 清空输入框
					reset(){
						this.coordinates = {
							x_shaft: 0,//x
							y_shaft: 0,//y
							angle: 0,//旋转角度
							width: 0,//宽度
							height: 0,//高度
							top_line_width: 0,
							bottom_line_width: 0,
							left_bottom: 0,//下线左距
							left_top: 0,//上线左距	
							spacing: 18// 双线间距
						}
					},
					//储存历史记录
					updateModifications() {
						let state = this.fabricHistoryJson.slice(0, this.mods);
						state.push(JSON.stringify(this.fabricObj));
						this.fabricHistoryJson = state;
						this.mods = state.length;
					},
					//canvas 历史后退
					undo() {
						let state = this.fabricHistoryJson;
						if (this.mods > 0) {
							this.fabricObj.clear().renderAll();
							this.fabricObj.loadFromJSON(state[this.mods - 2]);
							this.fabricObj.renderAll();
							this.mods -= 1;
						}
					},
					//前进
					redo() {
						let state = this.fabricHistoryJson;
						if (this.mods < state.length) {
							this.fabricObj.clear().renderAll();
							this.fabricObj.loadFromJSON(state[this.mods]);
							this.fabricObj.renderAll();
							this.mods += 1;
						}
					},
					//坐标转换 不连续
					transformMouse(mouseX, mouseY) {
						return {
							x: mouseX / this.zoom,
							y: mouseY / this.zoom
						};
					},
					// 选择
					resetObj() {
						this.fabricObj.selectable = false;
						this.fabricObj.selection = false;
						this.fabricObj.skipTargetFind = true; //选中框
						//清除文字对象
						if (this.textboxObj) {
							this.textboxObj.exitEditing();
							this.textboxObj = null;
						}
					},
					// 左侧工具栏
					handleTools(tools) {
						this.lei = tools;
						console.log(tools);
						if (tools === "undo") return this.undo();
						if (tools === "redo") return this.redo();
						if (tools === "reset") {
							this.fabricObj.clear();
							this.updateModifications(true);
							return;
						}
						// if (tools === "baocun") {
						// 	// this.downLoadImage();
						// 	return;
						// }

						this.currentTool = tools;
						this.fabricObj.isDrawingMode = false;
						this.resetObj();
						switch (tools) {
							case "pencil": //笔
								this.fabricObj.isDrawingMode = true; //绘图模式
								this.fabricObj.freeDrawingBrush.color = "#000"; //设置自由绘颜色
								this.fabricObj.freeDrawingBrush.width = 2;
								break;
							case "pick": //选中
								this.fabricObj.selection = true; //拖拉选择
								this.fabricObj.skipTargetFind = false; //移动
								this.fabricObj.selectable = true;
								console.log(this.fabricObj)
								break;
							case "remove11": //橡皮擦
								this.fabricObj.isDrawingMode = true;
								this.fabricObj.freeDrawingBrush.color = "#fff"; //设置自由绘颜色
								this.fabricObj.freeDrawingBrush.width = 50;

								break;
							case "remove":
								this.fabricObj.skipTargetFind = false; // canvas元素可选取
								var el = this.fabricObj.getActiveObject(); // 获取当前选择的元素
								if (!el._objects) {
									this.fabricObj.remove(el);
								} else {
									this.fabricObj.remove(el);
									el._objects.forEach((item) => this.fabricObj.remove(item));
								}

								break;
							default:
								break;
						}
					},
					//绘制文字对象
					drawText() {
						this.textboxObj = new fabric.Textbox(" ", {
							left: this.mouseFrom.x,
							top: this.mouseFrom.y,
							width: 220,
							fontSize: 18,
							fill: this.drawColor,
							hasControls: true,
							// evented: false,
						});
						this.fabricObj.add(this.textboxObj);
						this.textboxObj.enterEditing();
						this.textboxObj.hiddenTextarea.focus();
						this.updateModifications(true);
					},
					// 绘制
					drawing() {
						// let _this = this;
						if (this.drawingObject) {
							this.fabricObj.remove(this.drawingObject);
						}
						// let fabricObject = null
						// console.log("++++"+this.currentTool)
						switch (this.currentTool) {
							//选中
							case "drag":
								this.fabricObj.selection = true;
								this.fabricObj.skipTargetFind = false;
								this.fabricObj.selectable = true;
								break;
								//笔
							case "pencil":
								this.fabricObj.isDrawingMode = true;

								break;
								//直线
							case "line":
								this.fabricObject = new fabric.Line(
									[
										this.mouseFrom.x,
										this.mouseFrom.y,
										this.mouseTo.x,
										this.mouseTo.y,
									], {
										stroke: this.drawColor,
										strokeWidth: this.drawWidth,
										// isDrawingMode: true,
										// evented: false,
									}
								);

								break;
								//粗直线
							case "line1":
								this.fabricObject = new fabric.Line(
									[
										this.mouseFrom.x,
										this.mouseFrom.y,
										this.mouseTo.x,
										this.mouseTo.y,
									], {
										stroke: this.drawColor,
										strokeWidth: 5,
										// evented: false,
									}
								);
								break;
								//箭头
							case "arrow":
								this.fabricObject = new fabric.Path(
									this.drawArrow(
										this.mouseFrom.x,
										this.mouseFrom.y,
										this.mouseTo.x,
										this.mouseTo.y,
										17.5,
										17.5
									), {
										stroke: this.drawColor,
										fill: "rgba(255,255,255,0)",
										strokeWidth: this.drawWidth,
										// evented: false,
									}
								);
								break;
								//虚线
							case "xuxian": //doshed line
								this.fabricObject = new fabric.Line(
									[
										this.mouseFrom.x,
										this.mouseFrom.y,
										this.mouseTo.x,
										this.mouseTo.y,
									], {
										strokeDashArray: [10, 3],
										stroke: this.drawColor,
										strokeWidth: this.drawWidth,
										// evented: false,
									}
								);
								break;
								//点虚线
							case "xuxian1": //doshed line
								this.fabricObject = new fabric.Line(
									[
										this.mouseFrom.x,
										this.mouseFrom.y,
										this.mouseTo.x,
										this.mouseTo.y,
									], {
										strokeDashArray: [10, 10, 2, 10],
										stroke: this.drawColor,
										strokeWidth: this.drawWidth,
										// evented: false,
									}
								);
								break;
								//矩形 填充
							case "juxing":
								// var path =
								// 	"M " +
								// 	this.mouseFrom.x +
								// 	" " +
								// 	this.mouseFrom.y +
								// 	" L " +
								// 	this.mouseTo.x +
								// 	" " +
								// 	this.mouseFrom.y +
								// 	" L " +
								// 	this.mouseTo.x +
								// 	" " +
								// 	this.mouseTo.y +
								// 	" L " +
								// 	this.mouseFrom.x +
								// 	" " +
								// 	this.mouseTo.y +
								// 	" L " +
								// 	this.mouseFrom.x +
								// 	" " +
								// 	this.mouseFrom.y +
								// 	" z";
								// this.fabricObject = new fabric.Path(path, {
								// 	left: Math.min(this.mouseFrom.x, this.mouseTo.x),
								// 	top: Math.min(this.mouseFrom.y, this.mouseTo.y),
								// 	stroke: "#000",
								// 	strokeWidth: this.drawWidth,
								// 	fill: "#000",
								// 	// isDrawingMode: true,
								// 	// evented: false,//不能移动
								// });
								 this.fabricObject = new fabric.Rect({
									width : 16, //矩形的宽度
									height : 16, //矩形的高度
									left: this.mouseFrom.x,
									top: this.mouseFrom.y,
								});
								break;
								//矩形
							case "juxing1":
								var path1 =
									"M " +
									this.mouseFrom.x +
									" " +
									this.mouseFrom.y +
									" L " +
									this.mouseTo.x +
									" " +
									this.mouseFrom.y +
									" L " +
									this.mouseTo.x +
									" " +
									this.mouseTo.y +
									" L " +
									this.mouseFrom.x +
									" " +
									this.mouseTo.y +
									" L " +
									this.mouseFrom.x +
									" " +
									this.mouseFrom.y +
									" z";
								this.fabricObject = new fabric.Path(path1, {
									left: Math.min(this.mouseFrom.x, this.mouseTo.x),
									top: Math.min(this.mouseFrom.y, this.mouseTo.y),
									stroke: "#000",
									strokeWidth: this.drawWidth,
									fill: "",
								});
								break;
								//正圆
							case "cricle":
								var radius =
									Math.sqrt(
										(this.mouseTo.x - this.mouseFrom.x) *
										(this.mouseTo.x - this.mouseFrom.x) +
										(this.mouseTo.y - this.mouseFrom.y) *
										(this.mouseTo.y - this.mouseFrom.y)
									) / 2;
								this.fabricObject = new fabric.Circle({
									left: Math.min(this.mouseFrom.x, this.mouseTo.x),
									top: Math.min(this.mouseFrom.y, this.mouseTo.y),
									stroke: this.drawColor,
									fill: "rgba(255, 255, 255, 0)",
									radius: radius,
									strokeWidth: this.drawWidth,
									// evented: false,
								});
								break;
								//正圆 填充
							case "cricle1":
								var radius =
									Math.sqrt(
										(this.mouseTo.x - this.mouseFrom.x) *
										(this.mouseTo.x - this.mouseFrom.x) +
										(this.mouseTo.y - this.mouseFrom.y) *
										(this.mouseTo.y - this.mouseFrom.y)
									) / 2;
								this.fabricObject = new fabric.Circle({
									left: Math.min(this.mouseFrom.x, this.mouseTo.x),
									top: Math.min(this.mouseFrom.y, this.mouseTo.y),
									radius: radius,
									strokeWidth: this.drawWidth,
									// evented: false,
								});
								break;
								//门
							case "isosceles":
								var rect33 = new fabric.Rect({
									top: 99, //距离画布上边的距离
									left: 146, //距离画布左侧的距离，单位是像素
									width: 8, //矩形的宽度
									height: 50, //矩形的高度
									fill: "#FFF", //填充的颜色
									stroke: "#000", // 边框原色
									strokeWidth: 1, // 边框大小
								});
								var rect44 = new fabric.Rect({
									top: 144, //距离画布上边的距离
									left: 154, //距离画布左侧的距离，单位是像素
									width: 10, //矩形的宽度
									height: 10, //矩形的高度
									fill: "#000", //填充的颜色
									stroke: "#000", // 边框原色
									strokeWidth: 1, // 边框大小
									// objectCaching: false,
								});
								var rect55 = new fabric.Rect({
									top: 144, //距离画布上边的距离
									left: 90, //距离画布左侧的距离，单位是像素
									width: 10, //矩形的宽度
									height: 10, //矩形的高度
									fill: "#000", //填充的颜色
									stroke: "#000", // 边框原色
									strokeWidth: 1, // 边框大小
									// objectCaching: false,
								});
								var rect66 = new fabric.Circle({
									radius: 50,
									left: 200,
									top: 200,
									angle: 180,
									startAngle: 0,
									endAngle: Math.PI * 0.5,
									stroke: "#000",
									strokeWidth: 1,
									fill: "#FFF",
								});

								//进行组合
								this.fabricObject = new fabric.Group([rect33, rect44, rect55, rect66], {
									left: this.mouseFrom.x,
									top: this.mouseFrom.y,
								});
								break;
								//指北针
							case "isosceles1":
								var triangle = new fabric.Triangle({
									top: 51, //距离画布上边的距离
									left: 95, //距离画布左侧的距离，单位是像素
									width: 20, //矩形的宽度
									height: 50, //矩形的高度
									fill: '#000', //填充的颜色
									strokeWidth: 5 // 边框大小
								});
								var triangle2 = new fabric.Triangle({
									top: 89, //距离画布上边的距离
									left: 97, //距离画布左侧的距离，单位是像素
									width: 20, //矩形的宽度
									height: 15, //矩形的高度
									fill: '#FFF', //填充的颜色

								});
								var triangle1 = new fabric.Textbox("N", {
									top: 35,
									left: 100,
									width: 0,
									fontSize: 18,
									fill: '#000',
									hasControls: true,
									// evented: false,
								});
								var triangle3 = new fabric.Circle({
									top: 53, //距离画布上边的距离
									left: 81, //距离画布左侧的距离，单位是像素
									radius: 26, //圆形半径
									fill: '', //填充的颜色
									stroke: '#000', // 边框颜色

								});
								//进行组合
								this.fabricObject = new fabric.Group([triangle, triangle1, triangle2, triangle3], {
									left: this.mouseFrom.x,
									top: this.mouseFrom.y,
								})
								break;
								// this.$refs.canvas.createImage("/static/images/sticker1.png");
								//直角
							case "zhijiao":
								var rect00 = new fabric.Rect({
									left: 115,
									top: 285,
									width: 20,
									height: 14, //矩形的高度
									fill: "#FFF", //填充的颜色
									stroke: "#FFF", // 边框原色
									strokeWidth: 1, // 边框大小
								});

								var rect10 = new fabric.Rect({
									left: 100,
									top: 250,
									width: 16,
									height: 50, //矩形的高度
									fill: "#FFF", //填充的颜色
									stroke: "#000", // 边框原色
									strokeWidth: 1, // 边框大小
								});
								var rect010 = new fabric.Rect({
									left: 100,
									top: 284,
									width: 50,
									height: 16, //矩形的高度
									fill: "#FFF", //填充的颜色
									stroke: "#000", // 边框原色
									strokeWidth: 1, // 边框大小
								});

								//进行组合
								this.fabricObject = new fabric.Group([rect010, rect10, rect00], {
									left: this.mouseFrom.x,
									top: this.mouseFrom.y,
								});
								break;
								//双横线-18
							case "shuxian":
								let line = new fabric.Line([
										this.mouseFrom.x ,//左上短
										this.mouseFrom.y,
										this.mouseTo.x,//右上短
										this.mouseTo.y
									], {
										stroke: this.drawColor,
										strokeWidth: this.drawWidth
									})

									let line_one = new fabric.Line([
										this.mouseFrom.x ,//左下短
										this.mouseFrom.y + 18,//间距
										this.mouseTo.x ,//右下短
										this.mouseTo.y + 18//间距
									], {
										stroke: this.drawColor,
										strokeWidth: this.drawWidth
									})

								this.fabricObject = new fabric.Group([line, line_one], {
									left: this.mouseFrom.x,
									top: this.mouseFrom.y,
								})
								break;
								// 
								// 双线-12
							case "shuxian_one":
								let line_20 = new fabric.Line([
										this.mouseFrom.x ,//左上短
										this.mouseFrom.y,
										this.mouseTo.x,//右上短
										this.mouseTo.y
									], {
										stroke: this.drawColor,
										strokeWidth: this.drawWidth
									})

									let line_one_20 = new fabric.Line([
										this.mouseFrom.x ,//左下短
										this.mouseFrom.y + 12,//间距
										this.mouseTo.x ,//右下短
										this.mouseTo.y + 12//间距
									], {
										stroke: this.drawColor,
										strokeWidth: this.drawWidth
									})

								this.fabricObject = new fabric.Group([line_20, line_one_20], {
									left: this.mouseFrom.x,
									top: this.mouseFrom.y,
								})
								break;
								// 双线-24
							case "shuxian_two":
								let line_24 = new fabric.Line([
										this.mouseFrom.x ,//左上短
										this.mouseFrom.y,
										this.mouseTo.x,//右上短
										this.mouseTo.y
									], {
										stroke: this.drawColor,
										strokeWidth: this.drawWidth
									})

									let line_one_24 = new fabric.Line([
										this.mouseFrom.x ,//左下短
										this.mouseFrom.y + 24,//间距
										this.mouseTo.x ,//右下短
										this.mouseTo.y + 24//间距
									], {
										stroke: this.drawColor,
										strokeWidth: this.drawWidth
									})

								this.fabricObject = new fabric.Group([line_24, line_one_24], {
									left: this.mouseFrom.x,
									top: this.mouseFrom.y,
								})
								break;
								//双竖线
							case "shuxian1":
								this.fabricObject = new fabric.Rect({
									left: this.mouseFrom.x,
									top: this.mouseFrom.y,
									width: 16,
									height: this.mouseTo.x -
										this.mouseFrom.x +
										(this.mouseTo.y - this.mouseFrom.y), //矩形的高度
									fill: "", //填充的颜色
									stroke: "#000", // 边框原色
									strokeWidth: 1, // 边框大小
								});
								break;
							//双横线
							case 'shuxian2':
								this.fabricObject = new fabric.Rect({
									left: this.mouseFrom.x,
									top: this.mouseFrom.y,
									width: this.mouseTo.x -
										this.mouseFrom.x +
										(this.mouseTo.y - this.mouseFrom.y),
									height: 16, //矩形的高度
									fill: "", //填充的颜色
									stroke: "#000", // 边框原色
									strokeWidth: 1, // 边框大小
								});
								break;
								// 弧线
							case "arc":
									this.fabricObject = new fabric.Circle({
									radius: 50,
									left: this.mouseFrom.x ,
									top: this.mouseFrom.y,
									angle: 180,
									startAngle: 0,
									endAngle: Math.PI * 0.5,
									stroke: "#000",
									strokeWidth: 1,
									fill: "",
								})
								break;
								//窗户
							case "rightangle":
								var rect = new fabric.Rect({
									top: 35, //距离画布上边的距离
									left: 100, //距离画布左侧的距离，单位是像素
									width: 100, //矩形的宽度
									height: 6, //矩形的高度
									fill: "#FFF", //填充的颜色
									stroke: "#000", // 边框原色
									strokeWidth: 1, // 边框大小
									// objectCaching: false,
								});
								var rect1 = new fabric.Rect({
									top: 30, //距离画布上边的距离
									left: 100, //距离画布左侧的距离，单位是像素
									width: 100, //矩形的宽度
									height: 16, //矩形的高度
									fill: "", //填充的颜色
									stroke: "#000", // 边框原色
									strokeWidth: 1, // 边框大小
								});
								//进行组合
								this.fabricObject = new fabric.Group([rect, rect1], {
									left: this.mouseFrom.x,
									top: this.mouseFrom.y,
									fill: "#FFF",
									// evented: false,
								});
								break;
								//窗户1
							case "rightangle1":
								var rect11 = new fabric.Rect({
									top: 50, //距离画布上边的距离
									left: 16, //距离画布左侧的距离，单位是像素
									width: 100, //矩形的宽度
									height: 20, //矩形的高度
									fill: "#FFF", //填充的颜色
									stroke: "#000", // 边框原色
									strokeWidth: 1, // 边框大小
									// objectCaching: false,
								});
								var rect12 = new fabric.Rect({
									top: 54, //距离画布上边的距离
									left: 20, //距离画布左侧的距离，单位是像素
									width: 92, //矩形的宽度
									height: 16, //矩形的高度
									fill: "#FFF", //填充的颜色
									stroke: "#000", // 边框原色
									strokeWidth: 1, // 边框大小
								});
								var rect22 = new fabric.Rect({
									top: 58, //距离画布上边的距离
									left: 24, //距离画布左侧的距离，单位是像素
									width: 84, //矩形的宽度
									height: 16, //矩形的高度
									fill: "#FFF", //填充的颜色
									stroke: "#000", // 边框原色
									strokeWidth: 1, // 边框大小
								});
								//进行组合
								this.fabricObject = new fabric.Group([rect11, rect12, rect22], {
									left: this.mouseFrom.x,
									top: this.mouseFrom.y,
									// angle: 10
								});
								break;
								//楼梯
							case "louti":
								var recta = new fabric.Rect({
									top: 0, //距离画布上边的距离
									left: 100, //距离画布左侧的距离，单位是像素
									width: 50, //矩形的宽度
									height: 60, //矩形的高度
									fill: "#FFF", //填充的颜色
									stroke: "#000", // 边框原色
									strokeWidth: 1, // 边框大小
									// objectCaching: false,
								});

								var rect1a = new fabric.Rect({
									top: 0, //距离画布上边的距离
									left: 125, //距离画布左侧的距离，单位是像素
									width: 1, //矩形的宽度
									height: 60, //矩形的高度
									fill: "", //填充的颜色
									stroke: "#000", // 边框原色
									strokeWidth: 1, // 边框大小
								});

								var rect2a = new fabric.Rect({
									top: 8, //距离画布上边的距离
									left: 100, //距离画布左侧的距离，单位是像素
									width: 25, //矩形的宽度
									height: 22, //矩形的高度
									fill: "", //填充的颜色
									stroke: "#000", // 边框原色
									strokeWidth: 1, // 边框大小
								});

								var rect3a = new fabric.Rect({
									top: 15, //距离画布上边的距离
									left: 100, //距离画布左侧的距离，单位是像素
									width: 25, //矩形的宽度
									height: 8, //矩形的高度
									fill: "", //填充的颜色
									stroke: "#000", // 边框原色
									strokeWidth: 1, // 边框大小
								});
								var rect4a = new fabric.Rect({
									top: 30, //距离画布上边的距离
									left: 125, //距离画布左侧的距离，单位是像素
									width: 25, //矩形的宽度
									height: 22, //矩形的高度
									fill: "", //填充的颜色
									stroke: "#000", // 边框原色
									strokeWidth: 1, // 边框大小
								});
								var rect5a = new fabric.Rect({
									top: 37, //距离画布上边的距离
									left: 125, //距离画布左侧的距离，单位是像素
									width: 25, //矩形的宽度
									height: 8, //矩形的高度
									fill: "", //填充的颜色
									stroke: "#000", // 边框原色
									strokeWidth: 1, // 边框大小
								});

								//进行组合
								this.fabricObject = new fabric.Group(
									[recta, rect1a, rect2a, rect3a, rect4a, rect5a], {
										left: this.mouseFrom.x,
										top: this.mouseFrom.y,
									}
								);
								break;
							case "remove":
								break;
							default:
								// statements_def'
								break;
						}

						if (this.fabricObject) {
							this.fabricObj.add(this.fabricObject);
							this.drawingObject = this.fabricObject;
						}
					},

					//书写箭头的方法
					drawArrow(fromX, fromY, toX, toY, theta, headlen) {
						theta = typeof theta != "undefined" ? theta : 30;
						headlen = typeof theta != "undefined" ? headlen : 10;
						// 计算各角度和对应的P2,P3坐标
						let angle = (Math.atan2(fromY - toY, fromX - toX) * 180) / Math.PI,
							angle1 = ((angle + theta) * Math.PI) / 180,
							angle2 = ((angle - theta) * Math.PI) / 180,
							topX = headlen * Math.cos(angle1),
							topY = headlen * Math.sin(angle1),
							botX = headlen * Math.cos(angle2),
							botY = headlen * Math.sin(angle2);
						let arrowX = fromX - topX,
							arrowY = fromY - topY;
						let path = " M " + fromX + " " + fromY;
						path += " L " + toX + " " + toY;
						arrowX = toX + topX;
						arrowY = toY + topY;
						path += " M " + arrowX + " " + arrowY;
						path += " L " + toX + " " + toY;
						arrowX = toX + botX;
						arrowY = toY + botY;
						path += " L " + arrowX + " " + arrowY;
						return path;
					},

					// 保存
					baocun() {
						console.log("进来了");
						console.log(this.fabricObj.toDataURL("image/png"),"00000000000");
						console.log("进来了?s");
						this.downloadFile('ship.png', this.fabricObj.toDataURL("image/png"));
					},
					// pc保存
					base64Img2Blob(code) {
						var parts = code.split(';base64,');
						var contentType = parts[0].split(':')[1];
						var raw = window.atob(parts[1]);
						var rawLength = raw.length;

						var uInt8Array = new Uint8Array(rawLength);

						for (var i = 0; i < rawLength; ++i) {
							uInt8Array[i] = raw.charCodeAt(i);
						}

						return new Blob([uInt8Array], {
							type: contentType
						});
					},
					downloadFile(fileName, content) {
						
						var aLink = document.createElement('a');
						var blob = this.base64Img2Blob(content); //new Blob([content]);

						var evt = document.createEvent("MouseEvents");
						evt.initEvent("click", false, false); //initEvent 不加后两个参数在FF下会报错
						aLink.download = fileName;
						aLink.href = URL.createObjectURL(blob);

						aLink.dispatchEvent(evt);
					},
					// pc保存结束
					// 放大
					scale_max(){
						let oDiv = document.getElementById('canvas');
    				let box = document.getElementById('canvasDiv');
            oDiv.style.transform = "scale(" + (parseFloat(this.scale += 0.01)).toFixed(2) + ")"; 
					},
					// 缩小
					scale_min(){
						let oDiv = document.getElementById('canvas');
    				let box = document.getElementById('canvasDiv');

						if (this.scale == 0.01) {
                this.scale = 0.01
                return
            } else {
                scal = (parseFloat(this.scale -= 0.01)).toFixed(2);
            }
            oDiv.style.transform = "scale(" + this.scale + ")";    //scale()在这里要使用拼接的方式才能生效。
					},
					// 


					// 手机保存
			// 		base64Img2Blob(code) {
			// 			// console.log(code);
			// 		var parts = code.split(';base64,');
			// 		var contentType = parts[0].split(':')[1];
			// 		var raw = window.atob(parts[1]);
			// 		var rawLength = raw.length;

			// 		var uInt8Array = new Uint8Array(rawLength);

			// 		for (var i = 0;i < rawLength;++i) {
			// 			uInt8Array[i] = raw.charCodeAt(i);
			// 		}

			// 		return new Blob([uInt8Array], { type: contentType });
			// 		},
			// 		downloadFile(fileName, content) {
			// 		var that = this;
			// 		var aLink = document.createElement('a');
			// 		var blob = that.base64Img2Blob(content); //new Blob([content]);


			// 		var evt = document.createEvent("MouseEvents");
			// 		evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错
			// 		aLink.dispatchEvent(evt);
			// 		var bitmap = new window.plus.nativeObj.Bitmap('image');
			// 		console.log(content);
			// 		bitmap.loadBase64Data(content,function(i){
			// 			that.bigmapToSave(bitmap)
			// 		},function(err){
			// 			console.log(JSON.stringify(err));
			// 		})
			// 		},
			// 		bigmapToSave(bitmap){
			// 			var that = this;
			// 			var name = that.randomString(8);
			// 			console.log('-----------------------------'+JSON.stringify(bitmap));
			// 			bitmap.save(`_doc/${name}.png`,{overwrite:false},function(event){
			// 				console.log(event.target);
			// 				that.imageSaveByGallery(event.target);
			// 			},
			// 			function(err){
			// 				console.log(err);
			// 			})
			// 		},
			// 		imageSaveByGallery(url){
			// 			window.plus.gallery.save(url,function(event){
			// 				var tarbitmap = window.plus.nativeObj.Bitmap.getBitmapById('image');
							
			// 				tarbitmap.clear();
			// 				console.log('成功');
			// 				alert('保存成功!');
			// 				plus.nativeUI.actionSheet( {title:"保存成功!",cancel:"确认"}, function(e){
			// 				console.log( "User pressed: "+e.index );
			// 				} );
							
			// 			},function(err){
			// 				console.log('失败');

			// 			})
			// 		},
			// 		randomString(e){
			// 			e = e||32
			// 			var t ='QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm123456798';
			// 			var a=t.length;
			// 			var n='';
			// 			for(var i =0;i<e;i++){
			// 				n+=t.charAt(Math.floor(Math.random()*a));
			// 			}
			// 			return n;
			// 		}
				},
			});
			
		</script>

<!-- //鼠标滚轮 放大缩小 (如果不需要可以删除掉) (功能未完善)-->
<script type="text/javascript">
    var oDiv = document.getElementById('canvas');
    var box = document.getElementById('canvasDiv');
    var scal = 1;
 
    function onMouseWheel(ev) {/*当鼠标滚轮事件发生时，执行一些操作*/
        var ev = ev || window.event;
        var down = true; // 定义一个标志，当滚轮向下滚时，执行一些操作
        down = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0;
        if (down) {
            console.log('鼠标滚轮向下放大---------')
            scal = (parseFloat(scal) + 0.01).toFixed(2);
            console.log("放大系数: " + scal)
            oDiv.style.transform = "scale(" + scal + ")";    //scale()在这里要使用拼接的方式才能生效
            // oDiv.style.transformOrigin = '0 0';
        } else {
            console.log('鼠标滚轮向上缩小++++++++++')
            if (scal == 0.01) {
                scal = 0.01
                return
            } else {
                scal = (parseFloat(scal) - 0.01).toFixed(2);
            }
            console.log("缩小系数: " + scal)
            oDiv.style.transform = "scale(" + scal + ")";    //scale()在这里要使用拼接的方式才能生效。
            // oDiv.style.transformOrigin = '0 0';
        }
        if (ev.preventDefault) {/*FF 和 Chrome*/
            ev.preventDefault();// 阻止默认事件
        }
        return false;
    }
 
    addEvent(box, 'mousewheel', onMouseWheel);
    addEvent(box, 'DOMMouseScroll', onMouseWheel);
 
 
    function addEvent(obj, xEvent, fn) {
        if (obj.attachEvent) {
            obj.attachEvent('on' + xEvent, fn);
        } else {
            obj.addEventListener(xEvent, fn, false);
        }
    }
 
    function centerScale() {
        console.log("还原------")
        scal = 1;
        oDiv.style.transform = "scale(" + scal + ")";
        oDiv.style.transformOrigin = '0 0';
        // $("#drag").css({"transform": "scale(" + scal + ")","transformOrigin": "0 0"});//jquery写法
    }
	

</script>

	</body>

</html>
